var domian ="https://www.easy-mock.com/mock/5aa77cbf2b0894377fc76640";
function rank(method,url,data){
	var xhr = new XMLHttpRequest();
	xhr.open(method,url);
	xhr.setRequestHeader("projectname","qq_music");
	xhr.send(data);
	xhr.addEventListener("readystatechange",function(){
		if(xhr.status==200&&xhr.readyState==4){
			add2(xhr.response);
			
		}		
	})
}
rank("GET",domian+ "/rank");
function add2(res){
	var res = JSON.parse(res);
	var topList = res.data.topList;
	var t = "";
	var cpul2 = document.createDocumentFragment("ul");
	var oul2 = document.querySelector(".rank_ul");
	cpul2=oul2;
	topList.forEach(function(el){
		t+=`<li class="rank_li" data-id="${el.id}" data-type="0">
						<div class="rank_div">
							<a href="javascript:;"> 
								<img src="${el.picUrl}"/>
								<span class="listen_count"><i class="icon icon_listen"></i>${el.listenCount/10000}万</span>
							</a>
							<div class="topic_info">
								<div class="topic_cont">
		 						<h3 class="topic_tit">${el.topTitle}</h3>  
		 						${songlist(el.songList)}								
                				</div>
                				<i class="topic_arrow"></i>
							</div>
						</div>
					</li>
		`
	});
	
	cpul2.innerHTML+=t;	
	function songlist(res){
		var t2 = "";
		var sum=1;
		console.log(res)
		res.forEach(function(el){
			t2+=`<p>${sum++}<span class="text_name">${el.singername}</span><span>-${el.songname}</span></p>`
			
		})
		return t2
	}
}
